<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    
    <div class="wrapper">
        <h1>html5 元素周期表</h1>
        <div class="origin">
            <div class="row">
                <div class="ele the-root-element db">html</div>
            </div>
            <div class="row">
                <div class="ele document-metadata dn">head</div>
                <div class="ele sections db">body</div>
            </div>
            <div class="row">
                <div class="ele document-metadata metadata-content dn">title</div>
                <div class="ele tabular-data flow-content palpable-content dt">table</div>
                <div class="ele tabular-data dtca">caption</div>
                <div class="ele"></div>
                <div class="ele"></div>
                <div class="ele"></div>
                <div class="ele"></div>
                <div class="ele"></div>
                <div class="ele"></div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">em</div>
                <div class="ele text-level-semantics flow-content phrasing-content interactive-content palpable-content di">a</div>
                <div class="ele grouping-content flow-content palpable-content db">p</div>
                <div class="ele grouping-content flow-content palpable-content db">ol</div>
                <div class="ele sections flow-content heading-content palpable-content db">h1-h6</div>
                <div class="ele sections flow-content palpable-content db">header</div>
            </div>
            <div class="row">
                <div class="ele document-metadata metadata-content dn">meta</div>
                <div class="ele tabular-data dtr">tr</div>
                <div class="ele tabular-data dthg">thead</div>
                <div class="ele forms flow-content palpable-content db">form</div>
                <div class="ele forms flow-content interactive-content palpable-content dib">input</div>
                <div class="ele forms flow-content phrasing-content interactive-content palpable-content dib">keygen</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">span</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">bdi</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">bdo</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">strong</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">mark</div>
                <div class="ele grouping-content flow-content palpable-content db">pre</div>
                <div class="ele grouping-content flow-content palpable-content db">ul</div>
                <div class="ele sections flow-content palpable-content db">address</div>
                <div class="ele sections flow-content palpable-content db">footer</div>
            </div>
            <div class="row">
                <div class="ele document-metadata metadata-content dn">base</div>
                <div class="ele tabular-data dtce">th</div>
                <div class="ele tabular-data dtrg">tbody</div>
                <div class="ele forms flow-content palpable-content db">filedset</div>
                <div class="ele forms flow-content phrasing-content interactive-content palpable-content dib">button</div>
                <div class="ele forms flow-content phrasing-content palpable-content di">output</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">abbr</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">time</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">data</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">q</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">cite</div>
                <div class="ele grouping-content flow-content palpable-content db">blockquote</div>
                <div class="ele grouping-content dli">li</div>
                <div class="ele grouping-content flow-content palpable-content db">main</div>
                <div class="ele sections flow-content sectioning-content palpable-content db">nav</div>
            </div>
            <div class="row">
                <div class="ele document-metadata metadata-content dn">style</div>
                <div class="ele tabular-data dtce">td</div>
                <div class="ele tabular-data dtfg">tfoot</div>
                <div class="ele forms db">legend</div>
                <div class="ele forms flow-content phrasing-content interactive-content palpable-content di">label</div>
                <div class="ele forms flow-content phrasing-content palpable-content dib">progress</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">ruby*</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">code</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">samp</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">sup</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">sub</div>
                <div class="ele grouping-content flow-content palpable-content db">hr</div>
                <div class="ele grouping-content flow-content palpable-content db">dl</div>
                <div class="ele grouping-content flow-content palpable-content db">div</div>
                <div class="ele sections flow-content sectioning-content palpable-content db">aside</div>
            </div>
            <div class="row">
                <div class="ele document-metadata metadata-content dn">link</div>
                <div class="ele scripting metadata-content flow-content phrasing-content script-supporting-elements dn">template*</div>
                <div class="ele tabular-data dtco">col</div>
                <div class="ele forms di">option</div>
                <div class="ele forms flow-content phrasing-content interactive-content palpable-content dib">select</div>
                <div class="ele forms flow-content phrasing-content palpable-content dib">meter</div>
                <div class="ele edits flow-content phrasing-content palpable-content di">ins</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">var</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">dfn</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">b</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">i</div>
                <div class="ele text-level-semantics flow-content phrasing-content">br</div>
                <div class="ele grouping-content db">dt</div>
                <div class="ele grouping-content flow-content palpable-content db">figure</div>
                <div class="ele sections flow-content sectioning-content palpable-content db">section</div>
            </div>
            <div class="row">
                <div class="ele scripting metadata-content phrasing-content script-supporting-elements dn">script</div>
                <div class="ele scripting flow-content phrasing-content palpable-content">canvas*</div>
                <div class="ele tabular-data dtcog">colgroup</div>
                <div class="ele forms">optiongroup</div>
                <div class="ele forms flow-content phrasing-content dn">datalist</div>
                <div class="ele forms flow-content phrasing-content interactive-content palpable-content dib">textarea</div>
                <div class="ele edits flow-content phrasing-content di">del</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">small</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">big</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">u</div>
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">s</div>
                <div class="ele text-level-semantics flow-content phrasing-content">wbr</div>
                <div class="ele grouping-content db">dd</div>
                <div class="ele grouping-content db">figcaption</div>
                <div class="ele sections flow-content sectioning-content palpable-content db">article</div>
            </div>
        </div>
        <div class="extra">
            <div class="row">
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content di">img</div>
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content di">iframe</div>
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content di">embed</div>
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content">object</div>
                <div class="ele embedded-content dn">param</div>
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content">audio</div>
                <div class="ele embedded-content flow-content phrasing-content interactive-content palpable-content db">video</div>
                <div class="ele embedded-content dn">source</div>
                <div class="ele embedded-content dn">track</div>
                <div class="ele embedded-content flow-content phrasing-content palpable-content di">map</div>
                <div class="ele embedded-content flow-content phrasing-content dn">area</div>
                <div class="ele embedded-content flow-content phrasing-content palpable-content db">svg</div>
                <div class="ele embedded-content flow-content phrasing-content palpable-content db">math</div>
                <div class="ele embedded-content flow-content phrasing-content palpable-content db">canvas*</div>
            </div>
            <div class="row">
                <div class="ele web-components">cotent</div>
                <div class="ele web-components">element</div>
                <div class="ele web-components">shadow</div>
                <div class="ele web-components flow-content phrasing-content script-supporting-elements dn">template*</div>
            </div>
            <div class="row">
                <div class="ele text-level-semantics flow-content phrasing-content palpable-content di">ruby*</div>
                <div class="ele text-level-semantics db">rb</div>
                <div class="ele text-level-semantics dn">rp</div>
                <div class="ele text-level-semantics">rt</div>
                <div class="ele text-level-semantics">rc</div>
            </div>
        </div>
        <div class="controls">
            <div class="control">
              <button class="the-root-element">根元素</button>
              <button class="document-metadata">元数据元素</button>
              <button class="sections">节元素</button>
              <button class="grouping-content">组合元素</button>
              <button class="text-level-semantics">文本级</button>
              <button class="tabular-data">表格</button>
              <button class="forms">表单</button>
              <button class="edits">编辑</button>
              <button class="scripting">脚本</button>
              <button class="embedded-content">嵌入内容</button>
              <button class="web-components">组件</button>
            </div>
            <div class="control">
              <button class="metadata-content">元数据内容</button>
              <button class="flow-content" >流内容</button>
              <button class="sectioning-content">节内容</button>
              <button class="heading-content">标题内容</button>
              <button class="phrasing-content">短句内容</button>
              <button class="embedded-content">嵌入内容</button>
              <button class="interactive-content">交互内容</button>
              <button class="palpable-content">可感知内容</button>
              <button class="script-supporting-elements">脚本支持元素</button>
            </div>
            <div class="control">
              <button class="dn">display:none</button>
              <button class="db" >display:block</button>
              <button class="di">display:inline</button>
              <button class="dib">display:inline-block</button>
              <button class="dli">display:list-item</button>
              <button class="dt">display:table</button>
              <button class="dtca">display:table-caption</button>
              <button class="dtce">display:table-cell</button>
              <button class="dtr">display:table-row</button>
              <!--<button class="dtrg">display:table-row-group</button>
              <button class="dtco">display:table-column</button>
              <button class="dtcog">display:table-column-group</button>
              <button class="dthg">display:table-header-group</button>
              <button class="dtfg">display:table-footer-group</button>-->
            </div>
        </div>
        <footer>zptcsoft版权所有</footer>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>